<template>
  <div class="app-container">
    <!-- <sidebar class="sidebar-container" /> -->
    <el-card shadow="hover">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="70px">
        <el-row class="bottomLine">
          <el-form-item label="应用:" label-width="40">
            <el-select v-model="queryParams.applicationCode" multiple placeholder="请选择应用">
              <el-option v-for="dict in applicationList" :key="dict.appCode" :label="dict.name" :value="dict.appCode">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <div style="font-size: 15px;">显示满足如下行为模式的用户留存情况：
          <!--        <div style="width:200px;display: block;float: right;">设置关联属性-->
          <!--          <el-switch-->
          <!--            v-model="queryParams.relationFlag"-->
          <!--            active-color="#13ce66"-->
          <!--            inactive-color="#c0ccda">-->
          <!--          </el-switch>-->
          <!--        </div>-->
        </div>
        <el-divider style="margin: 1px 0 !important;"></el-divider>
        <el-row :gutter="10" class="bottomLine">
          <el-form-item label="初始行为" prop="status">
            <el-popover placement="bottom-start" width="800" trigger="click" class="select_style">
              <PanelSelect ref="panelSelect" @selected="selected" :eventObj="1" />
              <el-input slot="reference" v-model="queryParams.initTypeName" placeholder="点击选择事件" readonly
                style="width: 200px;cursor: pointer;" suffix-icon="el-icon-arrow-down">
              </el-input>
            </el-popover>
            <el-link type="primary" :underline="false" style="padding-left:20px;" @click="addRule('initRuleTypes')">
              <i class="el-icon-plus">筛选</i> 
            </el-link>
          </el-form-item>

        </el-row>
        <el-row v-show="queryParams.relationFlag">
          <el-form-item label="关联属性" style="display: block;padding-left:10px;">
            <el-select v-model="queryParams.initRelationType" style="width:220px">
              <el-option v-for="dict in eventTypeOptions" :key="dict.eventType" :label="dict.eventTypeName"
                :value="dict.eventType" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row v-show="queryParams.initRuleTypes.length > 0">
          <el-form-item label="" style="display: block;padding-left:80px;" label-width="60px">
            <AndOrLine style="height: calc(100% - 10px);" v-show="queryParams.initRuleTypes.length > 1"
              v-model="queryParams.beginConditionRelation"></AndOrLine>
            <p style="margin: 0 0 10px;" v-for="(eventItem, index) in queryParams.initRuleTypes" class="select_style">
              <el-select v-model="eventItem.eventType" style="width:120px;margin-right: 10px;"
                @change="eventTypeChange(queryParams.initRuleTypes, index)">
                <el-option v-for="dict in eventTypeOptions" :key="dict.id" :label="dict.eventTypeName"
                  :value="dict.id" />
              </el-select>
              <el-select v-model="eventItem.eventItem" style="width:120px;margin-right: 10px;" value-key="id">
                <el-option v-for="dict in allEventItemListOpts[eventItem.eventType]" :key="dict.id"
                  :label="dict.eventItemName" :value="dict" />
              </el-select>
              <el-select v-model="eventItem.eventItemExpression" style="width:120px;margin-right: 10px;">
                <el-option v-for="dict in  eventPropertysOptions[eventItem.eventItem.valueType]" :key="dict.id"
                  :label="dict.eventItemExpression" :value="dict.eventItemCode" />
              </el-select>
              <el-input v-model="eventItem.value1Str" type="text" controls-position="right" style="width:100px"
                v-show="eventItem.eventItemExpression != 'between'"></el-input>
              <span v-show="eventItem.eventItemExpression == 'between'">
                <el-input v-model="eventItem.value1Str" type="text" controls-position="right" style="width:90px">
                </el-input>与
                <el-input v-model="eventItem.value2Str" type="text" controls-position="right" style="width:90px">
                </el-input>之间
              </span>
              <el-link type="primary" :underline="false" style="padding-left:20px;font-size:18px"
                @click="removeRule(queryParams.initRuleTypes, index)">
                <i class="el-icon-remove"></i>
              </el-link>
            </p>

          </el-form-item>
        </el-row>
        <el-row :gutter="10" class="bottomLine">
          <el-form-item label="后续行为" prop="status">
            <el-popover placement="bottom-start" width="800" trigger="click">
              <PanelSelect ref="panelSelect" @selected="selected" :eventObj="2" />
              <el-input slot="reference" v-model="queryParams.nextTypeName" placeholder="点击选择事件" readonly
                style="width: 200px;" suffix-icon="el-icon-arrow-down">
              </el-input>
            </el-popover>
            <el-link type="primary" :underline="false" style="padding-left:20px;" @click="addRule('nextRuleTypes')">
              <i class="el-icon-plus">筛选</i> 
            </el-link>
          </el-form-item>
        </el-row>
        <el-row v-show="queryParams.relationFlag">
          <el-form-item label="关联属性" style="display: block;padding-left:10px;">
            <el-select v-model="queryParams.initRelationType" style="width:220px">
              <el-option v-for="dict in eventTypeOptions" :key="dict.id" :label="dict.eventTypeName"
                :value="dict.eventType" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row v-show="queryParams.nextRuleTypes.length > 0">
          <el-form-item label="" style="display: block;padding-left:80px;" label-width="60px">
            <AndOrLine style="height: calc(100% - 10px);" v-show="queryParams.nextRuleTypes.length > 1"
              v-model="queryParams.nextConditionRelation"></AndOrLine>
            <p style="margin: 0 0 10px;" v-for="(eventItem, index) in queryParams.nextRuleTypes" class="select_style">
              <el-select v-model="eventItem.eventType" style="width:120px;margin-right: 10px;"
                @change="eventTypeChange(queryParams.nextRuleTypes, index)">
                <el-option v-for="dict in eventTypeOptions" :key="dict.id" :label="dict.eventTypeName"
                  :value="dict.id" />
              </el-select>
              <el-select v-model="eventItem.eventItem" style="width:120px;margin-right: 10px;" value-key="id">
                <el-option v-for="dict in allEventItemListOpts[eventItem.eventType]" :key="dict.id"
                  :label="dict.eventItemName" :value="dict" />
              </el-select>
              <el-select v-model="eventItem.eventItemExpression" style="width:120px;margin-right: 10px;">
                <el-option v-for="dict in  eventPropertysOptions[eventItem.eventItem.valueType]" :key="dict.id"
                  :label="dict.eventItemExpression" :value="dict.eventItemCode" />
              </el-select>
              <el-input v-model="eventItem.value1Str" type="text" controls-position="right" style="width:100px"
                v-show="eventItem.eventItemExpression != 'between'"></el-input>
              <span v-show="eventItem.eventItemExpression == 'between'">
                <el-input v-model="eventItem.value1Str" type="text" controls-position="right" style="width:90px">
                </el-input>与
                <el-input v-model="eventItem.value2Str" type="text" controls-position="right" style="width:90px">
                </el-input>之间
              </span>
              <el-link type="primary" :underline="false" style="padding-left:20px;font-size:18px"
                @click="removeRule(queryParams.nextRuleTypes, index)">
                <i class="el-icon-remove"></i>
              </el-link>
            </p>

          </el-form-item>
        </el-row>
        <!--      <el-form-item label="按" prop="status" class="bottomLine">-->
        <!--        <el-tag-->
        <!--          :key="tag.eventType"-->
        <!--          v-for="tag in queryParams.dynamicTags"-->
        <!--          closable-->
        <!--          :disable-transitions="false"-->
        <!--          >-->
        <!--          {{ tag.eventTypeName }}-->
        <!--        </el-tag>-->
        <!--        <el-select style="width:120px"-->
        <!--                   v-if="inputVisible"-->
        <!--                   v-model="inputValue"-->
        <!--                   ref="saveTagInput"-->
        <!--                   size="small"-->
        <!--                   value-key="id"-->
        <!--                   @keyup.enter.native="handleInputConfirm"-->
        <!--                   @change="handleInputConfirm">-->
        <!--          <el-option-->
        <!--            v-for="dict in eventTypeOptions"-->
        <!--            :key="dict.eventType"-->
        <!--            :label="dict.eventTypeName"-->
        <!--            :value="dict"-->
        <!--          />-->
        <!--        </el-select>-->
        <!--        <el-button v-else class="button-new-tag" size="small" @click="showInput">+</el-button>-->
        <!--        <el-link type="primary" :underline="false" style="padding-left:20px;">-->
        <!--          <i class="el-icon-setting"></i> <span class="innerContent">查看</span>-->
        <!--        </el-link>-->
        <!--      </el-form-item>-->
        <el-row>
          <a style="font-size: 15px;margin-left: 10px;">且用户符合</a>
          <el-link type="primary" :underline="false" style="padding-left:20px;" @click="addUserAttribute">
            <i class="el-icon-plus">筛选</i> 

          </el-link>
        </el-row>

        <el-row v-show="queryParams.userAttributes.length > 0">
          <el-form-item label="" style="display: block;padding-left:80px;" label-width="60px">
            <p v-for="(v, index) in queryParams.userAttributes" class="select_style">
              <el-select v-model="queryParams.userAttributes[index].attributeName" style="width:120px"
                @change="userAttributeChangeFun(queryParams.userAttributes, index)">
                <el-option v-for="dict in userAttributeOptions" :key="dict.attributeName" :label="dict.attributeRemark"
                  :value="dict.attributeName" />
              </el-select>
              <el-select v-model="queryParams.userAttributes[index].valueExpression" style="width:120px"
                @change="eventPropertyChange(queryParams.userAttributes[index], index)">
                <el-option v-for="dict in userPropertysOptions" :key="dict.eventItemCode"
                  :label="dict.eventItemExpression" :value="dict.eventItemCode" />
              </el-select>
              <el-input v-model="queryParams.userAttributes[index].value1Str" type="text" controls-position="right"
                style="width:100px" v-show="queryParams.userAttributes[index].valueExpression != 'between'"></el-input>
              <span v-show="queryParams.userAttributes[index].valueExpression == 'between'">
                <el-input v-model="queryParams.userAttributes[index].value1Str" type="text" controls-position="right"
                  style="width:90px"></el-input>与
                <el-input v-model="queryParams.userAttributes[index].value2Str" type="text" controls-position="right"
                  style="width:90px"></el-input>之间
              </span>
              <el-link type="primary" :underline="false" style="padding-left:20px;font-size:18px"
                @click="removeRule(queryParams.userAttributes, index)">
                <i class="el-icon-remove"></i>
              </el-link>
            </p>

          </el-form-item>

        </el-row>
      </el-form>
    </el-card>

    <el-container>
      <el-main>
        <el-card shadow="hover" style="margin-left:-19px ; width: 103.4%;">
          <el-row :gutter="10">
            <el-col :span="6">
              <el-date-picker @change="queryKeepDtaFun" v-model="queryParams.dateRange" size="small"
                style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
                :picker-options="pickerOptions" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-col>
            <el-col :span="2">
              <el-select v-model="queryParams.dateType" placeholder="请选择" @change="queryKeepDtaFun">
                <el-option label="按天" value="day"></el-option>
                <el-option label="按周" value="week"></el-option>
                <el-option label="按月" value="month"></el-option>
              </el-select>
            </el-col>
            <el-col :span="2">
              <el-select v-model="queryParams.dateValue" placeholder="请选择" @change="queryKeepDtaFun"
                v-if="queryParams.dateType === 'day'">
                <el-option label="默认" value=""></el-option>
                <el-option label="次日" value="1"></el-option>
                <el-option label="7日" value="7"></el-option>
                <el-option label="14日" value="14"></el-option>
                <el-option label="30日" value="30"></el-option>
                <el-option label="60日" value="60"></el-option>
                <el-option label="自定义" value="自定义"></el-option>
              </el-select>
              <el-select v-model="queryParams.dateValue" placeholder="请选择" @change="queryKeepDtaFun"
                v-if="queryParams.dateType === 'week'">
                <el-option label="默认" value=""></el-option>
                <el-option label="次周" value="1"></el-option>
                <el-option label="8周" value="8"></el-option>
                <el-option label="12周" value="12"></el-option>
                <el-option label="24周" value="24"></el-option>
              </el-select>
              <el-select v-model="queryParams.dateValue" placeholder="请选择" @change="queryKeepDtaFun"
                v-if="queryParams.dateType === 'month'">
                <el-option label="默认" value="1"></el-option>
                <el-option label="次月" value="1"></el-option>
                <el-option label="6月" value="6"></el-option>
                <el-option label="12月" value="12"></el-option>
                <el-option label="24月" value="24"></el-option>
              </el-select>
            </el-col>
            <el-col :span="2">
              <el-select v-model="queryParams.queryType" placeholder="请选择" @change="queryKeepDtaFun">
                <el-option label="留存" value="leave"></el-option>
                <el-option label="流失" value="lose"></el-option>
              </el-select>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" icon="el-icon-search" size="small" @click="queryKeepDtaFun">查询</el-button>
            </el-col>

            <!--            <el-col :span="2" style="float: right">-->
            <!--              <el-checkbox v-model="queryParams.showType" v-show="queryParams.dateType==='day'" value="1" @change="queryKeepDtaFun">显示第 0 天</el-checkbox>-->
            <!--              <el-checkbox v-model="queryParams.showType" v-show="queryParams.dateType==='week'" value="2" @change="queryKeepDtaFun">显示第 0 周</el-checkbox>-->
            <!--              <el-checkbox v-model="queryParams.showType" v-show="queryParams.dateType==='month'" value="3" @change="queryKeepDtaFun">显示第 0 月</el-checkbox>-->
            <!--            </el-col>-->
          </el-row>
          <el-table v-loading="loadingData" :data="tableData" style="width: 100%;margin-bottom: 20px ; " row-key="id"
            border default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column v-for="(item, index) in tableTitle" :sortable="item.sortable" :key="index"
              show-overflow-tooltip="true" :prop="item.columnName" :label="item.columnLabel" />
          </el-table>

        </el-card>


        <el-row :gutter="10" v-show="false">
          <el-col :span="4">
            <el-button-group>
              <el-button type="primary" icon="el-icon-edit" size="small" @click="queryKeepDtaFun">趋势</el-button>
              <el-button type="primary" icon="el-icon-share" size="small" @click="queryKeepDtaFun">变化</el-button>
            </el-button-group>
          </el-col>
          <el-col :span="6" :offset="14">
            <el-button-group>
              <el-button type="primary" icon="el-icon-edit" size="small" @click="queryKeepDtaFun">留存人数</el-button>
              <el-button type="primary" icon="el-icon-share" size="small" @click="queryKeepDtaFun">留存百分比</el-button>
            </el-button-group>
          </el-col>
        </el-row>
        <el-radio-group v-model="tabPosition" style="margin-top:10px">
          <el-radio-button label="趋势">趋势</el-radio-button>
          <el-radio-button label="变化">变化</el-radio-button>
        </el-radio-group>
        <event-line-chart v-loading="loadingData" :chart-data="eventChartData" :chart-title="eventChartTitle" unit="%"
          :style="{ width: '100%' }" />
      </el-main>

    </el-container>
    
  </div>
</template>

<script>
import Sidebar from "../../../layout/components/Sidebar/index.vue";
import PanelSelect from "@/components/PanelSelect";
import { getAllSiteFlowList, getKeepDataFun } from "@/api/analytics/basemeasure";
import EventLineChart from "@/views/report/leave/comments/EventLineChart";
import AndOrLine from '@/components/AndOrLine/index.vue'
import { allEventItemsOptions, eventItemsOptions, eventTypeOptions } from "@/api/config/item";
import { listAllPropertyResult, listPropertyByType } from "@/api/config/property";
import { getUserAttributeList } from "@/api/config/userattribute";
import { listApplication } from "@/api/config/application";
import { getAllEventMethodResult } from "@/api/config/emethod";
import { parseTime } from "@/utils/ruoyi";

export default {
  name: "leave",
  components: {
    Sidebar,
    EventLineChart,
    PanelSelect,
    AndOrLine,
    
  },
  data() {
    return {
      tabPosition: '',
      lineChartData: {
        actualData: []
      },
      loadingData: false,
      // 遮罩层
      loading: true,
      tableData: [],
      tableTitle: [],
      allEventItemListOpts: {},
      eventPropertysOptions: {},
      applicationList: [],
      // 查询参数
      queryParams: {
        applicationCode: [],
        initTypeName: '',
        initEventType: '',
        initRuleTypes: [],
        initRelationType: '',
        initCategoryType: '',
        initEventJson: '',
        nextTypeName: '',
        nextEventType: '',
        nextRuleTypes: [],
        nextRelationType: '',
        nextCategoryType: '',
        nextEventJson: '',
        userAttributes: [],
        dynamicTags: [],
        dateRange: [parseTime(new Date(), '{y}-{m}-{d}'), parseTime(new Date(), '{y}-{m}-{d}')],
        dateType: 'day',
        dateValue: '',
        queryType: 'leave',
        showType: '1',
        pageNum: 1,
        relationFlag: false,
        pageSize: 10,
        name: undefined,
        status: undefined,
        beginConditionRelation: 'and',
        nextConditionRelation: 'and',
      },
      pickerOptions: {
        shortcuts: [{
          text: '今日',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '昨日',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '本周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            const day = start.getDay() || 7;
            var newStart = new Date(start.getFullYear(), start.getMonth(), start.getDate() + 1 - day);
            picker.$emit('pick', [newStart, end]);
          }
        }, {
          text: '上周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      eventTypeOptions: [],
      eventItemsOptions: [],
      eventItemMethosOption: [],
      referrerTypeOptions: [],
      userAttributeOptions: [],
      userPropertysOptions: [],
      inputVisible: false,
      inputValue: '',
      eventChartTitle: [],
      eventChartData: []
    };
  },
  created() {
    this.getEventTypeList();
    this.getAllEventItemsList();
    this.getApplicationList();
    this.getUserAttributeList();
    this.queryKeepDtaFun();
  },
  mounted() {
    this.$EventBus.$on('askComponentQueryJson', () => {
      this.askComponentQueryJson()
    })
  },
  beforeDestroy() {
    this.$EventBus.$off('askComponentQueryJson')
  },
  methods: {

    //提交queryJson给 sensorsdata
    askComponentQueryJson() {
      let requestJson = JSON.stringify(this.queryParams);
      this.$EventBus.$emit('commitComponentQueryJson', requestJson)
    },

    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' 元';
        } else {
          sums[index] = 'N/A';
        }
      });

      return sums;
    },
    selected(item, type) {
      if (type === 1) {
        this.queryParams.initTypeName = item.eventTypeName;
        this.queryParams.initEventType = item.eventType;
        this.queryParams.initCategoryType = item.categoryType;
        this.queryParams.initEventJson = item.eventJson;
      } else {
        this.queryParams.nextTypeName = item.eventTypeName;
        this.queryParams.nextEventType = item.eventType;
        this.queryParams.nextCategoryType = item.categoryType;
        this.queryParams.nextEventJson = item.eventJson;
      }

    },
    getApplicationList() {
      listApplication({ status: 'Y' }).then(response => {
        this.applicationList = response.rows;
        let that = this;
        this.applicationList.forEach(function (app) {
          if (app.defaultFlag === 'Y') {
            that.queryParams.applicationCode.push(app.appCode);
          }
        });
      });
    },
    getEventTypeList() {
      var param = { status: 'Y' };
      console.log(param);
      eventTypeOptions(param).then(response => {
        this.eventTypeOptions = response.data;
        // console.log(response)
        console.log(this.eventTypeOptions)
      });
    },
    getAllEventItemsList() {
      allEventItemsOptions().then(response => {
        this.allEventItemListOpts = response.data;
        console.log(this.allEventItemListOpts)
      });
      listAllPropertyResult().then(response => {
        this.eventPropertysOptions = response.data;
      });
      getAllEventMethodResult().then(response => {
        this.allEventItemMethodOpts = response.data;
      });
    },
    getUserAttributeList() {
      var param = { status: 'Y' };
      getUserAttributeList(param).then(response => {
        this.userAttributeOptions = response.data;
      });
    },
    addRule(name) {
      let eventItem = {
        eventType: '',
        eventItem: {},
        eventItemExpression: '',
        valueType: '',
        value1Str: '',
        value2Str: '',
      };
      this.queryParams[name].push(eventItem);
    },

    removeRule(array, index) {
      array.splice(index, 1);
    },
    eventTypeChange(array, index) {
      array[index].eventItem = {};
      array[index].eventItemExpression = '';
      array[index].value1Str = '';
      array[index].value2Str = '';
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm(val) {
      if (val) {
        this.queryParams.dynamicTags.push(val);
      }
      console.log(this.dynamicTags)
      this.inputVisible = false;
      this.inputValue = '';
    },
    editItemLabel(formItem) {
      formItem.labelFlag = false;
      formItem.editLabelFlag = true;
    },
    cancelEditLabel(formItem) {
      formItem.labelFlag = true;
    },

    addUserAttribute() {
      let userAttribute = {
        attributeName: '',
        attributeRemark: '',
        valueExpression: '',
        dataType: '',
        valueType: '',
        value1Str: '',
        value2Str: '',
      };
      this.queryParams.userAttributes.push(userAttribute);
    },
    userAttributeChangeFun(array, index) {
      array[index].valueExpression = '';
      array[index].value1Str = '';
      array[index].value2Str = '';
      listPropertyByType({ valueType: array[index].dataType }).then(response => {
        this.userPropertysOptions = response.data;
      });
    },

    queryKeepDtaFun() {
      console.log(this.queryParams);
      let requestJson = JSON.stringify(this.queryParams);
      this.loadingData = true;
      getKeepDataFun({ requestJson: requestJson }).then(response => {
        console.log(response.data);
        this.eventChartData = response.data.chartData;
        this.eventChartTitle = response.data.chartTitle;
        this.tableTitle = response.data.tableTitle;
        this.tableData = response.data.tableData;
        this.loadingData = false;
      });
    }
  }


};
</script>
<style lang="scss" scoped>
.innerContent {
  font-size: 14px;
  line-height: 20px;
  color: #307ef2;
  cursor: pointer;
}

.bottomLine {
  width: 80%;
  display: inline-block;
  border-bottom: 1px solid #e9f0f7;
  margin-bottom: 10px;
  padding-bottom: 10px;
}


::v-deep .el-table__body tbody tr:nth-child(even) td {
  background-color: #f0f9eb;
}


.select_style:hover {
  width: 1600px;
  background-color: #e2ecfa;
}

.funnel_style {
  color: #307ef2;
}

::v-deep {
/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width: 0;
    height: 0;
    //background-color: #ccc;
  }
}


</style>
